<template>
   <div class="">
        <div class="supplyAndDemand">
                <div class="supply-text">
                     <p>供需专区</p>
                     <p>THE ZONE SUPPLY AND DEMAND</p>
                </div>
                <div class="supply-content" >
                    <div class="supply-content-item" v-for="(item,index) in supplyTitles" @click="supplyContentItemClick(index)">
                        <div class="supply-content-item-icon"></div>
                        <p>{{item}}</p>
                    </div>
                </div>
            </div>
             <div class="dissolve-area" ref="specificArea">
                 <!-- <div class="triangle" ref="triangle"></div> -->
                 <div class="triangle"></div>
                 <div class="dissolve-area-content">
                     <div class="blueblock"><p class="p1">溶剂专区</p></div>
                     <p class="p2">墙面漆 涂料18L</p>
                     <p class="p3">油漆是一种能牢固覆盖在物体表面，起保护、装饰、标志和其他特殊用途的化学混合物，一定强度、连续的固态薄膜。这样形成的膜通称涂膜，</p>
                     <div class="buttonToDetail">
                         <p class="p4">了解详情</p>
                         <img src="@/assets/image/index/arrow_right.png" alt="">
                     </div>
                 </div>
                 <div class="butotonToSection">进入专区</div>
             </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
       return {
            supplyTitles:['重磅金技','供求金链','全域金代','天下金涂'],
            classA:{left:'1.1rem'},
            classB:{left:'2.7rem'},
            classC:{left:'4.3rem'},
            classD:{left:'5.9rem'},
            isA:true,
            isB:false,
            isC:false,
            isD:false
       }
   },
   methods:{
       supplyContentItemClick(index){
                document.documentElement.style.setProperty('--triangleMove',1.1+index*1.6+'rem')
                
   },
  
}
}
</script>

<style scoped lang="less">
html{
    --triangleMove: 1.1rem;  
 }
  .supplyAndDemand{
       background-color: #fff;
       height: 4.05rem;
       overflow: hidden;
   }
   .supply-text{
       margin-top: 0.9rem;
       text-align: center;
        :nth-child(1){
           font-size: 0.4rem;
           color: #333333;
       }
       :nth-child(2){
           font-size: 0.2rem;
          color: #5F6368;
       }
   }
   .supply-content{
       width: 6.4rem;
       height: 1.3rem;
       margin: 0 auto;
       margin-top: 0.75rem;
       display: flex;
       .supply-content-item{
           flex: 1;
           text-align: center;
           .supply-content-item-icon{
              width: 0.5rem;
              height: 0.5rem;
              border: 1px solid #000;
              margin: 0 auto;
              margin-bottom: 0.1rem;
             margin-top: 0.05rem;
           }
           p{
               font-size: 0.24rem;
           }
       }
   }
   .dissolve-area{
       position: relative;
       height: 5.9rem;
       background: #10112F;
       .triangle{
            content:"";
            border:0.25rem solid  #10112F;
            border-top-color:transparent;
            border-right-color:transparent;
            border-left-color:transparent; 
            width:0px;
            height:0px;
            position: absolute;
            top: -0.49rem;
            //  left:1.1rem;
            left: var(--triangleMove);
           
       }
      
   }
   .dissolve-area-content{
       width: 6.8rem;
       height: 4rem;
       border: 0.01rem #84869D solid;
       position: absolute;
       top: 14px;
       left: 50%;
       transform: translateX(-50%);
       .blueblock{
           background: #4166D1;
           height: 0.7rem;
          line-height: 0.7rem;
       }
       .p1{
           font-size: 0.24rem;
           color: #FFFFFD;
           margin-left: 0.4rem;
         
       }
       .p2{
           font-size: 0.24rem;
           color: #FCFFFF;
             margin-top: 0.2rem;
             margin-left: 0.42rem;

       }
       .p3{
           font-size: 0.2rem;
           color: #A9ADB0;
            margin-left: 0.42rem;
            margin-top: 0.37rem;
            margin-bottom: 0.37rem;
       }
       .buttonToDetail{
           width: 1.9rem;
           height: 0.6rem;       
           border: 1px solid  #6D6034;
           color: #C09A5C;
           font-size: 0.24rem;
           position: relative;
           margin-left: 0.42rem;
           img{
               width: 0.11rem;
               height: 0.14rem;
               position: absolute;
               right: 0.3rem;
               top: 50%;
               transform: translateY(-50%);
              
           }
           p{
               position: absolute;
               left: 0.42rem;
               top: 50%;
               transform: translateY(-50%);
               line-height: 0.24rem;
           }

       }
   }
   .butotonToSection{
       background-color: #D4AA58;
       font-size: 0.24rem;
       color: #F2FFFF;
       width: 2.6rem;
       height: 0.65rem;
       text-align: center;
       line-height: 0.65rem;
       position: absolute;
       bottom: 0.4rem;
       left: 50%;
       transform: translateX(-50%);
   }
</style>
